<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
	div {
		width: 100px;
		height: 100px;
		border: 1px solid red;
	}
	/*1.四个边设置相同的边距*/
	#d1 {
		padding: 20px;
		margin: 40px;
	}
	/*2.四个边设置不同的边距*/
	#d2 {
		/*上 右 下 左*/
		padding: 10px 20px 30px 40px;
		margin: 40px 30px 20px 10px;
	}
	/*3.单个边设置边距(left,right,top,bottom)*/
	#d3 {
		padding-left: 30px;
		margin-bottom: 30px;
	}
	/*4.对边(对称)设置边距*/
	#d4 {
		/*上下   左右*/
		padding: 20px 40px;
		margin: 20px 30px;
	}
	/*5.对边设置外边距的特殊用法:
		当左右值为auto时,元素会水平居中. */
	#d5 {
		margin: 50px auto;
	}
</style>
</head>
<body>
	<div id="d0">d0</div>
	<div id="d1">d1</div>
	<div id="d2">d2</div>
	<div id="d3">d3</div>
	<div id="d4">d4</div>
	<div id="d5">d5</div>
</body>
</html>









